<template>
	<view class="content">
		<div class="swiperDiv">
			<uni-search-bar placeholder="搜索" v-model="searchValue" @confirm="search" cancelButton="none">
				<template v-slot:searchIcon>
					<image src="../../static/common/img1-1.png" mode="widthFix" style="width: 36rpx;"></image>
				</template>
			</uni-search-bar>
		</div>
		<div class="bot-msg">
			<uni-row>
				<uni-col :span="8">
					<div class="scrollView">
						<scroll-view class="scroll-view" scroll-y="true" :show-scrollbar="false" enhanced>
							<view :class="!item.isActive?'scroll-view-item':'scroll-view-item active'"
								v-for="(item,index) in list" :key="index" @click="scrollView(index)">{{item.name}}
							</view>
						</scroll-view>
					</div>
				</uni-col>
				<uni-col :span="16">
					<div class="scrollView">
						<scroll-view class="scroll-view" scroll-y="true" :show-scrollbar="false" enhanced>
							<view class="scroll-view-item-r"
								@click="clickItem(item)"
								v-for="(item,index) in list" :key="index" >{{item.name}}
							</view>
						</scroll-view>
					</div>
				</uni-col>
			</uni-row>

		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				searchValue: '',
				current: [],
				list: [{
						name: '内科',
						isActive: false
					},
					{
						name: '外科',
						isActive: false
					},
					{
						name: '妇产科',
						isActive: false
					},
					{
						name: '耳鼻喉科',
						isActive: false
					},
					{
						name: '眼科',
						isActive: false
					},
					{
						name: '医疗美容科',
						isActive: false
					},
					{
						name: '牙科',
						isActive: false
					},
					{
						name: '儿科',
						isActive: false
					},
					{
						name: '内科',
						isActive: false
					},
					{
						name: '外科',
						isActive: false
					},
					{
						name: '妇产科',
						isActive: false
					},
					{
						name: '耳鼻喉科',
						isActive: false
					},
					{
						name: '眼科',
						isActive: false
					},
					{
						name: '医疗美容科',
						isActive: false
					},
					{
						name: '牙科',
						isActive: false
					},
					{
						name: '儿科',
						isActive: false
					}
				]

			}
		},
		onLoad() {

		},
		methods: {
			search(res) {
				console.log(res,"res----")
				this.$common.navigateTo("/pages/register/search?value="+res.value)
			},
			scrollView(val) {
				this.list.forEach((item, index) => {
					if (val == index) {
						item.isActive = true
					} else {
						item.isActive = false
					}
				})
			},
			clickItem(val){
				console.log(val,"val===")
				this.$common.navigateTo("/pages/register/doctor?value="+JSON.stringify(val))
			}
			
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 144rpx;
		width: 100%;
		height: calc(100% - 144rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx
	}

	.bot-msg-btn {
		width: 94%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	/deep/ .uni-row {
		height: 96%;
		width: 100%;
	}

	/deep/ .uni-col-8 {
		height: 100%;
		width: 100%;
	}
	/deep/ .uni-col-16 {
		height: 100%;
		width: 100%;
	}

	.scrollView {
		height: 100%;
		width: 100%;
	}

	.scroll-view {
		height: 100%;
		width: 100%;
	}

	.scroll-view-item {
		height: 96rpx;
		font-size: 24rpx;
		color: #666666;
		padding: 0rpx 48rpx;
		line-height: 96rpx;
		background-color: #F5FAFF;
	}
	.scroll-view-item-r{
		height: 96rpx;
		
		font-size: 24rpx;
		font-weight: 600;
		color: #1648CE;
		padding: 0rpx 72rpx;
		line-height: 96rpx;
		/* border-bottom:2rpx solid #F2F4F5; */
	}
	
	/* .scroll-view-item-r:active{
		background-color: #F5FAFF;
		
	} */
	
	.active {
		color: #1648CE;
		font-weight: 600;
		background-color: #fff;
	}

	button[type=primary] {
		background-color: #1648CE;
	}

	/deep/ .uni-searchbar__box {
		border-radius: 50rpx !important;
	}

	/deep/ .uni-searchbar {
		padding: 36rpx 24rpx;
	}
</style>